<template>
  <div>
    <el-card style="margin: 20px 0">
      <CategorySelect :show="scene === 1" @changeCategoryId="changeCategoryId" />
    </el-card>
    <el-card>
      <div v-show="scene === 0">
        <el-button :disabled="!category3Id" type="primary" icon="el-icon-plus" @click="addSpuFn">添加SPU</el-button>
        <el-table :data="spuList" style="margin:20px 0; width: 100%;" border>
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="spuName" label="SPU名称" />
          <el-table-column prop="description" label="SPU描述" />
          <el-table-column prop="操作" label="操作" width="180">
            <template v-slot="{row}">
              <hint-button size="mini" type="success" icon="el-icon-plus" title="添加sku" />
              <hint-button size="mini" type="warning" icon="el-icon-edit" title="修改spu" @click="editSpuFn(row)" />
              <hint-button size="mini" type="info" icon="el-icon-info" title="查看当前类所有的实例" />
              <hint-button size="mini" type="danger" icon="el-icon-delete" title="删除spu" />
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.page"
          :page-sizes="[5, 10, 20]"
          :page-size="page.limit"
          layout="prev, pager, next, jumper, -> , total, sizes"
          style="text-align: center"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <SkuForm v-show="scene === 2" />

      <SpuForm v-show="scene === 1" ref="spu" @goBack="goBackFn" @changeScene="scene=0" />
    </el-card>
  </div>
</template>

<script>
import SkuForm from './components/SkuForm.vue'
import SpuForm from './components/SpuForm.vue'
export default {
  components: {
    SkuForm, SpuForm
  },
  data() {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      page: {
        page: 1,
        limit: 5
      },
      spuList: [], // spu数据存储的数组
      total: 0, // 数据总数
      scene: 1 // 0展示spu列表数据；1代表添加修改spu；2代表添加sku
    }
  },
  methods: {
    goBackFn() {
      this.scene = 0
      this.getSpuList()
    },
    // 修改spu按钮被点击
    editSpuFn(row) {
      this.scene = 1
      this.$refs.spu.getSpuFn(row)
    },
    // 添加spu按钮被点击
    addSpuFn() {
      this.scene = 1
      this.$refs.spu.addSpu(this.category3Id)
    },
    // 分页器页码发生改变
    handleCurrentChange(page) {
      this.page.page = page
      this.getSpuList()
    },
    // 分页器每页的数量发生改变
    handleSizeChange(limit) {
      this.page.limit = limit
      this.getSpuList()
    },
    // 三级联动获取id
    changeCategoryId({ categoryId, level }) {
      // categoryId获取一、二、三级分类的id。level获取级别
      if (level === 1) {
        this.category1Id = categoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (level === 2) {
        this.category2Id = categoryId
        this.category3Id = ''
      } else {
        this.category3Id = categoryId
        this.getSpuList()
      }
    },
    // 获取spu数据回调函数
    async getSpuList() {
      const res = await this.$API.spu.getSpuList(this.page.page, this.page.limit, this.category3Id)
      if (res.code === 200) {
        this.spuList = res.data.records
        this.total = res.data.total
      }
    }
  }
}
</script>

<style>

</style>
